{% extends "auth-menu.html" %}
{% load tag %}
{% block head %}
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <style type="text/css">
    html,body{
        margin:0;
        width:100%;
        height:100%;
        background:#ffffff;
    }
{#    #map{#}
{#        width:100%;#}
{#        height:100%;#}
{#        top:20%;#}
{#        left:20%;#}
{#    }#}
    #panel {
        position: absolute;
        top:30px;
        left:10px;
        z-index: 999;
        color: #fff;
    }
    #login{
        position:absolute;
        width:300px;
        height:40px;
        left:50%;
        top:50%;
        margin:-40px 0 0 -150px;
    }
    #login input[type=password]{
        width:200px;
        height:30px;
        padding:3px;
        line-height:30px;
        border:1px solid #000;
    }
    #login input[type=submit]{
        width:80px;
        height:38px;
        display:inline-block;
        line-height:38px;
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=krejNXU0gOAVoRnoGTDczzDrvryBXnmM"></script>


{#  没有需要加载的文件#}
 {% endblock %}

{% block display1 %}
    "display: block"
{% endblock %}

{% block active1 %}
    'active'
{% endblock %}

{% block active_sub_source_show %}
    'active'
{% endblock %}

{% block main %}
{#   <div class='span12'>#}
{#        <div class='page-header'>#}
{#            <h1 class='pull-left'>#}
{#                <i class='icon-edit'></i>#}
{#                <span>数据源展示</span>#}
{#            </h1>#}
{#            <div class='pull-right'>#}
{#                <ul class='breadcrumb'>#}
{#                    <li>#}
{#                        <a href="/index"><i class='icon-bar-chart'></i>#}
{#                        </a>#}
{#                    </li>#}
{#                    <li class='separator'>#}
{#                        <i class='icon-angle-right'></i>#}
{#                    </li>#}
{#                    <li>#}
{#                        数据源统计#}
{#                    </li>#}
{#                    <li class='separator'>#}
{#                        <i class='icon-angle-right'></i>#}
{#                    </li>#}
{#                    <li class='active'>货运数据源</li>#}
{#                </ul>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}

{#  	<div id="r-result">#}
{#		<input type="button"  onclick="openjyj();" value="jyj"/>#}
{#        <input type="button"  onclick="closeall();" value="关闭全部"/>#}
{#	</div>#}


<div id="map" style="width: 100%;height:800px;"></div>
    <script type="text/javascript">
    var map = new BMap.Map("map", {});                        // 创建Map实例

        map.centerAndZoom(new BMap.Point(113.531398,32.897445), 6);     // 初始化地图,设置中心点坐标和地图级别

    map.addControl( new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));// 左上角，添加比例尺

    map.enableScrollWheelZoom();                        //启用滚轮放大缩小
    map.addControl(new BMap.MapTypeControl());
    map.disable3DBuilding();

    map.addControl(new BMap.CityListControl({   //城市列表
    anchor: BMAP_ANCHOR_TOP_LEFT
{#    offset: size,#}
    // 切换城市之间事件
    // onChangeBefore: function(){
    //    alert('before');
    // },
    // 切换城市之后事件
    // onChangeAfter:function(){
    //   alert('after');
    // }
}));







    if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
        var points = [];  // 添加海量点数据
        {% for i in list_huoyun %}
        points.push(new BMap.Point{{ i }});
        {% endfor %}

        var options = {
            size: BMAP_POINT_SIZE_TINY,
            shape: BMAP_POINT_SHAPE_CIRCLE,
            color: '#ff0000'
        }
        var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection

        var points_keyun=[];
        {% for i in list_keyun %}
        points_keyun.push(new BMap.Point{{ i }});
        {% endfor %}

        var options_keyun = {
            size: BMAP_POINT_SIZE_TINY,
            shape: BMAP_POINT_SHAPE_CIRCLE,
            color: '#0064ff'
        }
        var pointCollection_keyun = new BMap.PointCollection(points_keyun, options_keyun);  // 初始化PointCollection


         var points_taxi = [];  // 添加海量点数据
        {% for i in list_taxi %}
        points_taxi.push(new BMap.Point{{ i }});
        {% endfor %}

        var options_taxi = {
            size: BMAP_POINT_SIZE_TINY,
            shape: BMAP_POINT_SHAPE_CIRCLE,
            color: '#00ff00'
        }
        var pointCollection_taxi = new BMap.PointCollection(points_taxi, options_taxi);  // 初始化PointCollection




        map.addOverlay(pointCollection);  // 添加Overlay

        map.addOverlay(pointCollection_keyun);

        map.addOverlay(pointCollection_taxi);


    } else {
        alert('请在chrome、safari、IE8+以上浏览器查看本示例');
    }

// 定义一个控件类,即function 关闭显示
	function ZoomControl(){
	  // 默认停靠位置和偏移量
	  this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
	  this.defaultOffset = new BMap.Size(10, 35);
	}

	// 通过JavaScript的prototype属性继承于BMap.Control
	ZoomControl.prototype = new BMap.Control();

	// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
	// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
	ZoomControl.prototype.initialize = function(map){
	  // 创建一个DOM元素
	  var close = document.createElement("close");
	  // 添加文字说明
	  close.appendChild(document.createTextNode(" 关闭显示 "));
	  // 设置样式
	  close.style.cursor = "pointer";
	  close.style.border = "1px solid gray";
	  close.style.backgroundColor = "white";
	  // 绑定事件,点击一次放大两级
	  close.onclick = function(e){
		closeall();
	  }
	  // 添加DOM元素到地图中
	  map.getContainer().appendChild(close);
	  // 将DOM元素返回
	  return close;
	}
	// 创建控件
	var myZoomCtrl = new ZoomControl();
	// 添加到地图当中
	map.addControl(myZoomCtrl);

// 定义一个控件类,即function 显示行业数据1-货运
	function ZoomControl_show1(){
	  // 默认停靠位置和偏移量
	  this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
	  this.defaultOffset = new BMap.Size(10, 65);
	}

	// 通过JavaScript的prototype属性继承于BMap.Control
	ZoomControl_show1.prototype = new BMap.Control();

	// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
	// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
	ZoomControl_show1.prototype.initialize = function(map){
	  // 创建一个DOM元素
	  var show1 = document.createElement("show1");
	  // 添加文字说明
	  show1.appendChild(document.createTextNode(" 行业数据1 "));
	  // 设置样式
	  show1.style.cursor = "pointer";
	  show1.style.border = "1px solid gray";
	  show1.style.backgroundColor = "white";
	  // 绑定事件,点击一次放大两级
	  show1.onclick = function(e){
		openhuoyun();
	  }
	  // 添加DOM元素到地图中
	  map.getContainer().appendChild(show1);
	  // 将DOM元素返回
	  return show1;
	}
	// 创建控件
	var myZoomCtrl_show1 = new ZoomControl_show1();
	// 添加到地图当中
	map.addControl(myZoomCtrl_show1);

// 定义一个控件类,即function 显示行业数据2-出租车
	function ZoomControl_show2(){
	  // 默认停靠位置和偏移量
	  this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
	  this.defaultOffset = new BMap.Size(10, 95);
	}

	// 通过JavaScript的prototype属性继承于BMap.Control
	ZoomControl_show2.prototype = new BMap.Control();

	// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
	// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
	ZoomControl_show2.prototype.initialize = function(map){
	  // 创建一个DOM元素
	  var show2 = document.createElement("show2");
	  // 添加文字说明
	  show2.appendChild(document.createTextNode(" 行业数据2 "));
	  // 设置样式
	  show2.style.cursor = "pointer";
	  show2.style.border = "1px solid gray";
	  show2.style.backgroundColor = "white";
	  // 绑定事件
	  show2.onclick = function(e){
		opentaxi();
	  }
	  // 添加DOM元素到地图中
	  map.getContainer().appendChild(show2);
	  // 将DOM元素返回
	  return show2;
	}
	// 创建控件
	var myZoomCtrl_show2 = new ZoomControl_show2();
	// 添加到地图当中
	map.addControl(myZoomCtrl_show2);

	function ZoomControl_show2(){
	  // 默认停靠位置和偏移量
	  this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
	  this.defaultOffset = new BMap.Size(10, 95);
	}

	// 通过JavaScript的prototype属性继承于BMap.Control
	ZoomControl_show2.prototype = new BMap.Control();

	// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
	// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
	ZoomControl_show2.prototype.initialize = function(map){
	  // 创建一个DOM元素
	  var show2 = document.createElement("show2");
	  // 添加文字说明
	  show2.appendChild(document.createTextNode(" 行业数据2 "));
	  // 设置样式
	  show2.style.cursor = "pointer";
	  show2.style.border = "1px solid gray";
	  show2.style.backgroundColor = "white";
	  // 绑定事件
	  show2.onclick = function(e){
		openkeyun();
	  }
	  // 添加DOM元素到地图中
	  map.getContainer().appendChild(show2);
	  // 将DOM元素返回
	  return show2;
	}
	// 创建控件
	var myZoomCtrl_show2 = new ZoomControl_show2();
	// 添加到地图当中
	map.addControl(myZoomCtrl_show2);




    function ZoomControl_show3(){
	  // 默认停靠位置和偏移量
	  this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
	  this.defaultOffset = new BMap.Size(10, 125);
	}

	// 通过JavaScript的prototype属性继承于BMap.Control
	ZoomControl_show3.prototype = new BMap.Control();

	// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
	// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
	ZoomControl_show3.prototype.initialize = function(map){
	  // 创建一个DOM元素
	  var show3 = document.createElement("show3");
	  // 添加文字说明
	  show3.appendChild(document.createTextNode(" 行业数据3 "));
	  // 设置样式
	  show3.style.cursor = "pointer";
	  show3.style.border = "1px solid gray";
	  show3.style.backgroundColor = "white";
	  // 绑定事件
	  show3.onclick = function(e){
		opentaxi();
	  }
	  // 添加DOM元素到地图中
	  map.getContainer().appendChild(show3);
	  // 将DOM元素返回
	  return show3;
	}
	// 创建控件
	var myZoomCtrl_show3 = new ZoomControl_show3();
	// 添加到地图当中
	map.addControl(myZoomCtrl_show3);

        function openhuoyun(){
            pointCollection.show();
        }
        function openkeyun(){
            pointCollection_keyun.show();
        }
        function opentaxi(){
            pointCollection_taxi.show();
        }
        function closeall(){
{#             pointCollection.show();#}
             pointCollection.hide();
             pointCollection_taxi.hide();
             pointCollection_keyun.hide();
        }
  </script>
{% endblock %}
{% block script %}
    <script type="text/javascript" src="http://developer.baidu.com/map/custom/stylelist.js"></script>
{% endblock %}